<template>
  <el-drawer
    :class="[b('dialog'), b('filter')]"
    lock-scroll
    class="avue-dialog"
    :modal-append-to-body="false"
    :title="t('crud.filterTitle')"
    :size="crud.isMobile ? '100%' : '60%'"
    :visible.sync="box"
  >
    <el-row :span="24">
      <div :class="b('filter-menu')">
        <el-button-group>
          <el-button
            type="primary"
            :size="crud.isMediumSize"
            @click="handleAdd"
            >{{ t('crud.filter.addBtn') }}</el-button
          >
          <el-button
            type="primary"
            :size="crud.isMediumSize"
            @click="handleClear"
            >{{ t('crud.filter.resetBtn') }}</el-button
          >
          <el-button
            type="primary"
            :size="crud.isMediumSize"
            @click="handleValueClear"
            >{{ t('crud.filter.clearBtn') }}</el-button
          >
        </el-button-group>
      </div>
      <el-col
        :md="12"
        :xs="24"
        :sm="12"
        v-for="(column, index) in list"
        :key="index"
        :class="b('filter-item')"
      >
        <avue-select
          v-model="column.text"
          :dic="columnOption"
          :props="columnProps"
          :clearable="false"
          @change="handleChange(column.text, index)"
          :size="crud.isMediumSize"
          :class="b('filter-label')"
        ></avue-select>
        <avue-select
          :class="b('filter-symbol')"
          v-model="column.symbol"
          :dic="symbolDic"
          :clearable="false"
          :size="crud.isMediumSize"
        ></avue-select>
        <form-temp
          :column="getColumnByIndex(columnList[index])"
          :size="crud.isMediumSize"
          :class="b('filter-value')"
          :dic="crud.DIC[columnList[index].prop]"
          :props="columnList[index].props || crud.tableOption.props"
          v-model="column.value"
        >
        </form-temp>
        <el-button
          type="danger"
          :class="b('filter-icon')"
          size="mini"
          @click="handleDelete(index)"
          circle
          icon="el-icon-minus"
        ></el-button>
      </el-col>
      <el-col :span="24" class="avue-form__menu avue-form__menu--right">
        <el-button
          type="primary"
          :size="crud.isMediumSize"
          @click="handleSubmit"
          >{{ t('crud.filter.submitBtn') }}</el-button
        >
        <el-button @click="box = false" :size="crud.isMediumSize">{{
          t('crud.filter.cancelBtn')
        }}</el-button>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script>
import { Crud } from '../../../../assets/avue/avue'

export default {
  extends: Crud.components.dialogFilter,
}
</script>

<style lang="scss" scoped></style>
